<!--
 * @Author: folusGan 245942153@qq.com
 * @Date: 2024-10-18 17:00:05
 * @LastEditors: folusGan 245942153@qq.com
 * @LastEditTime: 2024-10-30 16:35:02
 * @Description: 
-->
<template>
  <div>
    <el-row class="bor-row pd-10">
      <div class="detail-img flex-vertical">
        <img :src="imageUrl" />
      </div>
      <div class="dec-wrap">
        <h1 v-if="Description?.title" class="title">
          {{ Description?.title }}
        </h1>
        <div class="pd-10" v-if="Description?.type">
          {{ $t('type') }} :
          {{ Description.type }}
        </div>
        <div class="pd-10" v-if="Description?.Diameter">
          {{ $t('Diameter') }} :
          {{ Description.Diameter }}
        </div>
        <div class="pd-10" v-if="Description?.width">
          {{ $t('width') }} :
          {{ Description.width }}
        </div>
        <div class="pd-10">
          {{ $t('DoorThickness') }}：{{ Description?.thickness }}
        </div>
        <div class="pd-10">
          {{ $t('BacksetLength') }}：{{ Description?.Backset }}
        </div>
        <div class="pd-10" v-if="Description?.color">
          {{ $t('color') }}：{{ Description.color }}
        </div>
        <div class="pd-10">
          {{ $t('OpeningDirection') }}：{{ Description?.direction }}
        </div>
        <div v-if="Description?.others">
          {{ $t('others') }}：{{ Description.others }}
        </div>
        <div v-if="Description?.shap">
          {{ $t('shap') }}：{{ Description.shap }}
        </div>
      </div>
    </el-row>
    <div class="pad-30" v-if="showDtail">
      <img :src="detailUrl" />
    </div>
    <div class="bottom-btn" @click="handleBack">
      <button class="btn">{{ $t('goBack') }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'name',
  data() {
    return {
      imageUrl: require('../../assets/imgs/mainPage/cylinder/cylinder-03.png'),
      detailUrl: require('../../assets/imgs/detail/Cylinder-detail-01.png'),
      showDtail: false,
    }
  },
  computed: {
    Description() {
      try {
        const ss = JSON.parse(sessionStorage.getItem('description'))
        const { description, title } = this.$route.query
        if (title) description.title = title
        return description
      } catch (error) {
        this.$message({
          message: '出错了,因为你刷新了页面 路由没有带title属性', // `${JSON.stringify(this.$route.query)}`,
          type: 'warning',
        })
        return ''
      }
    },
  },
  watch: {
    $route: {
      handler: function (to, from) {
        try {
          const { imgUrl, description, detail } = this.$route.query
          console.log(
            `../../assets/imgs/mainPage/${imgUrl}.png`,
            this.$route.query
          )
          if (imgUrl) {
            this.imageUrl = require(`../../assets/imgs/mainPage/${imgUrl}.png`)
            sessionStorage.setItem('description', JSON.stringify(description))
          } else {
            console.error('imgUrl is undefined', 'ghy')
          }
          if (detail) {
            this.showDtail = true
            this.detailUrl = require(`../../assets/imgs/detail/${detail}.png`)
          } else {
            this.showDtail = false
          }
        } catch (error) {
          console.log(error)
          if (from?.path === '/products/product-detail') return
          this.$message({
            message: '没找到详情的内规格图！', //`${JSON.stringify(this.$route.query)}`,
            type: 'warning',
          })
          this.showDtail = false
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleBack() {
      // this.$router.push('/products/handler-sets')
      this.$router.go(-1)
    },
  },
  created() {},
  mounted() {},
}
</script>

<style lang="scss" scoped>
$bg-url: url('../../assets/imgs/deadbolts/Deadbolts-01.png');
@mixin bg-img($bg-url) {
  background-image: $bg-url;
}
.detail-img {
  color: var(--main--color);
  width: 320px;
  height: 260px;
}
.bor-row {
  display: flex;
  border-bottom: 1px dashed #a18b8b;
}
.dec-wrap {
  padding-left: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  padding-bottom: 30px;
  font-size: 24px;
}
.bottom-btn {
  position: fixed;
  bottom: 70px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.btn {
  padding: 5px 15px;
}
.pad-30 {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}
</style>
